<%--
  Created by IntelliJ IDEA.
  User: teacher
  Date: 2022/4/14
  Time: 13:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script>
        function checkUsername(){
            let username = document.getElementById("username").value;
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    let result = xhr.responseText;
                    document.getElementById("s1").innerHTML = result;
                }
            };
            // get请求
            // xhr.open("get","${pageContext.request.contextPath}/checkUsername?username="+username,true);
            // xhr.send(null);

            // post请求
            xhr.open("post","${pageContext.request.contextPath}/checkUsername",true);
            // post请求的参数并不是在url地址栏中体现的
            // 而是在请求体中
            // 因此,需要指定当前请求参数的数据传输方式
            // 将其数据传输方式指定为表单数据,其默认是payload
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send("username="+username);
        }
    </script>
</head>
<body>
<h1>用户注册</h1>
<hr/>
<form action="#" method="post">
    用户名:<input type="text" id="username" onblur="checkUsername()"/><span id="s1"></span><br/>
    密&nbsp;&nbsp;&nbsp;码:<input type="password" name="password"/><br/>
    电&nbsp;&nbsp;&nbsp;话:<input type="text" name="phone"/><br/>
    地&nbsp;&nbsp;&nbsp;址:<input type="text" name="address"/><br/>
    <input type="submit" value="注册">
</form>
</body>
</html>
